<template>
  <div style="margin-top: -60px;">
  <el-container style="height: 700px; border: 1px solid #eee">
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
      <el-menu :router='true'
               active-text-color=blue>
        <el-menu-item index="/User/UserInfo">
          <template slot='title'>
            <span>个人信息</span>
          </template>
        </el-menu-item>

        <el-menu-item index="/User/carList">
          <template slot='title'>
            <span>汽车列表</span>
          </template>
        </el-menu-item>

        <el-submenu index='1'>
          <template slot='title'>
            <span>拍卖活动</span>
          </template>
          <el-menu-item index="/User/auctionEvent">所有拍卖活动</el-menu-item>
          <el-menu-item index="/User/offeredActivity">已出价的拍卖活动</el-menu-item>
          <el-menu-item index="/User/reserve">我预约的拍卖活动</el-menu-item>
        </el-submenu>

        <el-menu-item index="/User/winningCar">
          <template slot='title'>
            <span>已竞得的汽车</span>
          </template>
        </el-menu-item>


        <el-submenu index='2'>
          <template slot='title'>
            <span>退出系统</span>
          </template>
          <el-menu-item index='/' @click="logout">确认退出</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>
    <el-main>
      <router-view>
      </router-view>
    </el-main>
  </el-container>
  </div>
</template>

<script setup>
import axios from 'axios';
import {useRouter} from "vue-router/composables";
//退出登录
const router = useRouter();

const logout = async () => {
  try {
    const response = await axios.get('/api/user/login/logout');
    if (response.data.code === 200) {
      // 清除本地存储的登录信息或其他必要操作
      localStorage.removeItem('token'); // 假设登录信息存储在 localStorage 中
      await router.push('/'); // 可以跳转到登录页或其他页面
    } else {
      // 处理退出系统失败的情况
      console.error('退出系统失败:', response.data.message);
    }
  } catch (error) {
    console.error('退出系统请求失败:', error);
    // 处理请求失败的情况
  }
};
</script>
